<template>
	<view class="content">
		<view class="all-bill">
			<view class="one-bill" v-for="(item,index) in list" :key='index'>
				<view class="bill-left">
					<view>{{item.name}}</view>
					<text>2023-05-20 14:32</text>
				</view>
				<view class="bill-right">
					<view v-if="item.price>0">+{{item.price}}</view>
					<view v-else style="color:#D71B0A">{{item.price}}</view>
					<text>钱包余额 143.12</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:"打車退款",
						price:'23.12'
					},
					{
						name:"提現",
						price:'-23.12'
					},
					{
						name:"打車退款",
						price:'23.12'
					},
					{
						name:"提現",
						price:'-23.12'
					},
					{
						name:"打車退款",
						price:'23.12'
					},
					{
						name:"提現",
						price:'-23.12'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;
			margin-right:auto;
			padding-top:24rpx;
			.all-bill{
				width:100%;background-color: #ffffff;
				border-radius:20rpx;padding:0 24rpx;box-sizing: border-box;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				.one-bill{
					display: flex;padding:24rpx 0;
					width:100%;
					align-items: center;box-sizing: border-box;
					justify-content: space-between;
					border-bottom:1px solid #F0F0F0;
					.bill-left{
						font-size:30rpx;color:#040404;
						line-height: 42rpx;
						text{
							font-size:26rpx;color:#9E9E9E;
							line-height:37rpx;margin-top:10rpx;
						}
					}
					.bill-right{
						font-size:30rpx;color:#FC9A03;
						line-height:42rpx;text-align: right;
						text{
							font-size:26rpx;color:#040404;
							line-height:37rpx;margin-top:10rpx;
						}
					}
					&:last-child{
						border:none;
					}
				}
			}
		}
	}
</style>
